<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>附近的人</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <!--    <link rel="stylesheet" type="text/css" href="../css/css.css"/>-->
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
</head>

<body>

<div id="app">
    <div class="near_f bg-fff">
        <div class="leidabody">
            <div class="near_title">
                <span>附近的人</span>
            </div>
            <div class="leida">
                <img class="zuobiao" src="../image/zuobiao.png" alt="">
                <div class="leidasm">

                </div>
            </div>
            <div class="zzsz">
                <p>正在（设置的）查找1000米以内的人...</p>
            </div>

            <div class="my_logout">
                我要约会
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script type="text/javascript" src="../aui/js/aui.js"></script>
<script src="../script/vue2.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script src="../script/swiper-3.3.1.min.js"></script>
<script type="text/javascript">
    apiready = function () {
        var vm = new Vue({
            el: "#app",
            data: {
                list: [],
                page: 1,
                bMap: '',
                isyuehui: false,
                goodVisibility: true,
                nonew: false
            },
            mounted: function () {
                var that = this;
                var token = $api.getStorage('userInfo').token

                if (!isLogin) {
                    toLogin()
                } else {
                    this.getlocal()
                }
                that.getrefUserinfo()
                // 监听热更新
                api.addEventListener({
                    name: 'hhxx'
                }, function (ret, err) {
                    that.getlocal()
                });
            },
            methods: {
                getcan: function () {

                },
                huanyihuan: function () {
                    this.page += 1
                    this.getlocal()
                },
                goDetail: function (e) {
                    var that = this;
                    if (!that.isyuehui) {
                        api.toast({msg: '请开启约会', location: 'middle'});
                    } else {
                        api.openWin({
                            name: 'reg',
                            url: 'widget://html/appointment/yuehuidetail.html',
                            slidBackType: 'edge',
                            vScrollBarEnabled: false,
                            slidBackEnabled: false,
                            pageParam: {
                                id: e
                            }
                        })
                    }
                },
                // 约会开关
                yuehuiis: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    console.log(token);
                    api.ajax({
                        url: ajaxRoute.onlocation,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                is_location: !that.isyuehui ? 1 : 0,
                            }
                        }
                    }, function (ret, err) {
                        if (ret.code == 1) {
                            that.isyuehui = !that.isyuehui
                            that.list[0].status = !that.list[0].status
                            that.$nextTick(function () {
                                that.swipes()
                            });
                            api.toast({msg: ret.msg, location: 'middle'});
                        } else {
                            api.hideProgress();
                            api.toast({msg: ret.msg, location: 'middle'});
                        }
                    });
                },
                getlocal: function () {
                    var that = this;
                    var bMap = api.require('bMap');
                    if (api.systemType == "ios") {
                        bMap.getLocationServices(function (ret, err) {
                            if (ret.authorizationStatus == 'denied') {

                            } else {
                                bMap.initMapSDK(function (ret) { //ios初始化
                                    if (ret.status) {
                                        bMap.getLocation({ //定位
                                            accuracy: '10m',
                                            autoStop: true,
                                            filter: 100
                                        }, function (ret, err) {
                                            if (ret.status) {
                                                that.lat = ret.lat;
                                                that.lng = ret.lon;
                                                that.getList(1)
                                            } else {
                                                that.getlocal()
                                                // alert(err.msg);
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    } else {
                        bMap.getLocationServices(function (ret, err) {
                            console.log(JSON.stringify(ret));
                            console.log("定位返回信息");
                            if (!ret.enable) {
                                // api.alert({
                                //     title: '未开启定位功能!',
                                //     msg: '请在手机设置中打开定位功能',
                                // });
                            } else {
                                bMap.getLocation({ //定位
                                    accuracy: '10m',
                                    autoStop: true,
                                    filter: 100
                                }, function (ret, err) {
                                    if (ret.status) {
                                        that.lat = ret.lat;
                                        that.lng = ret.lon;
                                        that.getList(1)
                                    } else {
                                        that.getlocal()
                                        // alert(err.msg);
                                    }
                                });
                            }
                        });
                    }
                    // setInterval(function () {
                    //     that.getlocal()
                    // }, 300000);
                },
                onLoad2: function () {
                    // 异步更新数据
                    var that = this
                    if (that.finished) {
                        return
                    }
                    that.page++
                    setTimeout(function () {
                        that.getaccountlist2();
                    }, 500);
                },

                getrefUserinfo: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    console.log(token);
                    api.ajax({
                        url: ajaxRoute.center,
                        method: 'post',
                        data: {
                            values: {
                                token: token
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            api.hideProgress();
                            that.isyuehui = res.data.onlocation
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                getmakemeeting: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.makemeeting,
                        method: 'post',
                        data: {
                            values: {
                                token: token
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            api.toast({msg: '发布成功', location: 'middle'});
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                swipes: function () {
                    var that = this;
                    if (that.nonew) {
                        var swiper = new Swiper('.swiper-container', {
                            observer: true,
                            observeParents: true,
                            effect: 'coverflow',
                            grabCursor: true,
                            centeredSlides: true,
                            slidesPerView: 'auto',
                            loop: true,
                            coverflow: {
                                rotate: 50,
                                stretch: 0,
                                depth: 100,
                                modifier: 1,
                                slideShadows: true
                            },
                        });
                    } else {
                        var swiper = new Swiper('.swiper-container', {
                            observer: true,
                            observeParents: true,
                            effect: 'coverflow',
                            grabCursor: true,
                            centeredSlides: true,
                            slidesPerView: 'auto',
                            coverflow: {
                                rotate: 50,
                                stretch: 0,
                                depth: 100,
                                modifier: 1,
                                slideShadows: true
                            },
                            onReachEnd: function (swiper) {
                                that.page++
                                that.getList()
                            }
                        });
                    }
                },
                getList: function (type) {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.selectnearby,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                lng: that.lng,
                                lat: that.lat,
                                page: that.page
                            }
                        }
                    }, function (res, err) {
                        console.log(that.page);
                        console.log(that.lng);
                        console.log(token);
                        console.log(that.lat);
                        if (res.code == 1) {
                            console.log(JSON.stringify(res))
                            api.hideProgress();
                            if (type == 2) {
                                api.refreshHeaderLoadDone()
                            }
                            if (res.data.length == 0) {
                                // api.toast({msg: '暂无用户', location: 'middle'});
                                that.page--
                                that.nonew = true
                            }
                            var sss = that.list

                            for (var i = 0; i < res.data.length; i++) {
                                var k = {}
                                k.thumb = res.data[i].thumb
                                k.id = res.data[i].id
                                k.top = suiji(i + 1)
                                k.left = suiji(i + 1)
                                k.distance = res.data[i].distance
                                k.status = false
                                sss.push(k)
                            }
                            that.list = sss
                            console.log(JSON.stringify(that.list));
                            if (that.list.length == 0) {
                                api.toast({msg: '搜索中，请耐心等待', location: 'middle'});
                            }
                            that.$nextTick(function () {
                                that.swipes()
                            });
                            console.log(JSON.stringify(that.list));
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
            },
            filters: {
                filtersImg: function (img) {
                    var imgs = ajaxUrl + '/' + img
                    console.log(imgs)
                    return imgs;
                }
            },
        })
        var that = this;
        var CFG = {
            perDeg: 1,
        };
        scale = 6;
        var can = document.getElementById('can');
        can.width = can.width * scale;
        can.height = can.height * scale;
        var ctx = can.getContext('2d');
        var deg = 0;
        ctx.strokeStyle = 'rgba(0,255,0,1)';

        function init() {
            ctx.fillStyle = 'rgba(0,50,0,1)';
            ctx.arc(150 * scale, 150 * scale, 150 * scale, 0, 2 * Math.PI);
            ctx.fill();
            var raf = window.requestAnimationFrame(loop);
        }

        function loop() {
            deg = (deg + CFG.perDeg);
            cover();
            drawPosLine();
            drawRadar(deg);
            raf = window.requestAnimationFrame(loop);
        }

        function cover() {
            ctx.save();
            ctx.fillStyle = 'rgba(0,0,0,0.02)';
            ctx.arc(150 * scale, 150 * scale, 150 * scale, 0, 2 * Math.PI);
            ctx.fill();
            ctx.restore();
        }

        function suiji(s) {
            return Math.floor(Math.random() * 180) + (s * 20)
        }

        function drawPosLine() {
            // ctx.beginPath();
            // ctx.moveTo(150 * scale, 0);
            // ctx.lineTo(150 * scale, 300 * scale);
            // ctx.closePath();
            // ctx.stroke();

            // ctx.beginPath();
            // ctx.moveTo(0, 150 * scale);
            // ctx.lineTo(300 * scale, 150 * scale);
            // ctx.closePath();
            // ctx.stroke();

            ctx.moveTo(150 * scale, 150 * scale);
            ctx.beginPath();
            // ctx.arc(canvas.width / 2, canvas.height / 2, 800, 0 * Math.PI, 2 * Math.PI);
            // cxt.lineWidth = scale*16;
            ctx.arc(150 * scale, 150 * scale, 100 * scale, 0 * Math.PI, 2 * Math.PI);
            ctx.closePath();
            ctx.stroke();

            ctx.moveTo(150 * scale, 150 * scale);
            ctx.beginPath();
            ctx.arc(150 * scale, 150 * scale, 50 * scale, 0 * Math.PI, 2 * Math.PI);
            ctx.closePath();
            ctx.stroke();
        }

        function drawRadar(iDeg) {
            ctx.fillStyle = 'rgba(0,200,0,.7)';
            ctx.beginPath();
            ctx.moveTo(150 * scale, 150 * scale);
            ctx.arc(150 * scale, 150 * scale, 150 * scale, (-2 * CFG.perDeg + iDeg) / 180 * Math.PI, (0 + iDeg) / 180 * Math.PI);
            ctx.closePath();
            ctx.fill();
        }

        init();
    }
</script>
